import { Component } from 'react'
// 渲染属性共享组件的状态
// 在需要共享的组件（Mouse）上，添加一个render的自定义属性，该属性是一个自定义函数
// 在自定义函数的内部返回需要共享给的那个组件（Cat）
// 在需要共享的组件（Mouse）内部，通过 this.props.render() 或者 props.render() 即可调用，参数即为需要共享的状态
// 那么在定义自定义render属性的函数内部，就会接收到 参数，通过返回的组件（Cat）传递该参数即可

// const Cat = ({ mounsePointer }) => {
//   return (
//     <div style={ {
//       position: 'fixed',
//       left: mounsePointer.x,
//       top: mounsePointer.y,
//       backgroundColor: '#ccc',
//       width: 100,
//       height: 100
//     } }></div>
//   )
// }

// const obj = {
//   a: {
//     b: {
//       c: 1
//     }
//   }
// }
// const c = obj.a.b.c
// const { c } = obj.a.b
// const { b: { c } } = obj.a
// const { a: { b : { c } } } = obj
const Cat = ({ mounsePointer: { x, y } }) => {
  return (
    <div style={ {
      position: 'fixed',
      left: x,
      top: y,
      backgroundColor: '#ccc',
      width: 100,
      height: 100
    } }></div>
  )
}

class Mounse extends Component {
  state = { x: 0, y: 0 }

  render () {
    return (
      <div style={ { width: '100vw', height: '100vh', backgroundColor: '#f66'} } onMouseMove = { (event) => {
        console.log(event)
        // 修改初始化值
        this.setState({
          x: event.clientX,
          y: event.clientY
        })
      } }>
        <p>
          当前鼠标的位置在，x：{ this.state.x },y: { this.state.y }

        </p>
        { this.props.render(this.state) }
      </div>
    )
  }
}
class App extends Component {
  render () {
    return (
      <div>
        {/* <Mounse></Mounse>
        <Cat ></Cat> */}
        <Mounse render = { (mounsePointer) => {
          return <Cat mounsePointer = { mounsePointer }/>
        } }></Mounse>
      </div>
    )
  }
}

export default App